<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/konva.js"></script>
    <script src="js/TextCircle.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
            overflow: hidden;
            background: #e8e8e8;
        }
    </style>
</head>
<body>
<div id="containerId">

</div>
<script>
    //1.创建舞台
    var stage = new Konva.Stage({
        width:window.innerWidth,
        height:window.innerHeight,
        container:'containerId'
    });
    //2.创建背景层
    var layer = new Konva.Layer();
    //将层添加舞台中
    stage.add(layer);
    var x = stage.width() * 0.5,y = stage.height() * 0.5;
    var bg_inner_circle_r = 150;
    var bg_outer_circle_R = 270;

    var bg_inner_circle = new Konva.Circle({
        x:x,
        y:y,
        radius:bg_inner_circle_r,
        stroke:'#ccc',
        strokeWidth: 5,
        dash: [7,3]
    });
    layer.add(bg_inner_circle);

    var bg_outer_circle = new Konva.Circle({
        x: x,
        y: y,
        radius:bg_outer_circle_R,
        stroke:'#ccc',
        strokeWidth: 5,
        dash: [7,3]
    });
    layer.add(bg_outer_circle);

    //中心圆：
    var textCircle = new TextCircle({
        x: x,
        y: y,
        outerRadius: 70,
        innerRadius: 60,
        innerFill: '#666',
        outerColor: '#ccc',
        text: '小码哥教育'
    });
    textCircle.render(layer);
    layer.draw();

    //绘制动画层
    var animation_layer = new Konva.Layer();
    stage.add(animation_layer);

    //绘制内层动画组
    var innerGroup = new Konva.Group({
        x: x,
        y: y
    });
    animation_layer.add(innerGroup);

    var html = new TextCircle({
        x: bg_inner_circle_r * Math.cos(120 * Math.PI / 180),
        y:bg_inner_circle_r * Math.sin(120 * Math.PI / 180),
        outerRadius: 45,
        innerRadius: 40,
        innerFill: "pink",
        text: 'HTML5',
        outerColor: "#ccc"
    });
    //绘制外层动画组
    html.render(innerGroup);

    var ios = new TextCircle({
        x: bg_inner_circle_r * Math.cos(240 * Math.PI / 180),
        y:bg_inner_circle_r * Math.sin(240 * Math.PI / 180),
        outerRadius: 45,
        innerRadius: 40,
        innerFill: "black",
        text: 'IOS',
        outerColor: "lightgray"
    });
    //绘制外层动画组
    ios.render(innerGroup);

    var ui = new TextCircle({
        x: bg_inner_circle_r * Math.cos(360 * Math.PI / 180),
        y:bg_inner_circle_r * Math.sin(360 * Math.PI / 180),
        outerRadius: 45,
        innerRadius: 40,
        innerFill: "red",
        text: 'UI',
        outerColor: "lightgray"
    });
    //绘制外层动画组
    ui.render(innerGroup);

    var outerGroup = new Konva.Group({
        x: x,
        y: y
    });
    animation_layer.add(outerGroup);

    var java = new TextCircle({
        x: bg_outer_circle_R * Math.cos(120 * Math.PI/180),
        y: bg_outer_circle_R * Math.sin(120 * Math.PI/180),
        innerRadius: 60,
        outerRadius: 65,
        innerFull: 'purple',
        text: 'JAVA',
        outerColor:'lightgray'
    });
    java.render(outerGroup);

    var andiord = new TextCircle({
        x: bg_outer_circle_R * Math.cos(240 * Math.PI/180),
        y: bg_outer_circle_R * Math.sin(240 * Math.PI/180),
        innerRadius: 60,
        outerRadius: 65,
        innerFull: 'green',
        outerColor:'lightgray',
        text: 'Andiord'
    });
    andiord.render(outerGroup);

    var cpp = new TextCircle({
        x: bg_outer_circle_R * Math.cos(360 * Math.PI/180),
        y: bg_outer_circle_R * Math.sin(360 * Math.PI/180),
        innerRadius: 60,
        outerRadius: 65,
        innerFull: 'skyblue',
        outerColor:'lightgray',
        text: 'C++'
    });
    cpp.render(outerGroup);

    animation_layer.draw();

    // 一秒旋转的度数
    var anglePerSe = 60;
    // 创建Animation对象，一种特殊的定时器,每一帧会执行一次
    var anima = new Konva.Animation(function (frame) {
        // 计算一帧需要的时间(ms)
        var timeDiff = frame.timeDiff / 1000;
        // 计算一帧旋转的度数
        var angle = timeDiff * anglePerSe;
        // 内组做动画
        innerGroup.rotate(angle);
        innerGroup.getChildren().rotate(-angle);
        // 外组做动画
        outerGroup.rotate(-angle);
        outerGroup.getChildren().rotate(angle);
    },animation_layer);

    // 开启动画
    anima.start();

    // 绑定事件
    animation_layer.on('mouseover',function () {
        anglePerSe = 20;
    });
    animation_layer.on('mouseout',function () {
        anglePerSe = 60;
    });

</script>
</body>
</html>